<template>
  <div>
    <el-dialog title="巡检设备明细" :visible.sync="$parent.openSelect" width="60%" append-to-body>
      <div class="center_dialog_children">
        <div v-for="(item, index) in tableData" :key="index">

          <el-divider v-if="index === 0">巡检设备信息</el-divider>
          <div :id="`one${index}`" class="opions"></div>
          <!-- <br><br><br><br><br> -->
          <br>

          <span :style="{ 'font-size': '14px' }"> 区域编号:<span :style="{ 'color': '#999' }">{{
              item.areaNum
          }}</span>
            区域名称:<span :style="{ 'color': '#999' }">{{
                item.areaName
            }}</span></span>
          <template v-if="condition === '实际'">
            巡检员:<span :style="{ 'color': '#999' }">
              {{ item.inspectionBy }}</span>
          </template>
          <el-table :style="{ 'margin-top': '10px' }" v-loading="item.loading" ref="multipleTable"
            :data="item.areaArrays">
            <el-table-column label="序号" align="center" width="50">
              <template slot-scope="scope">
                {{ scope.$index + 1 || '-' }}
              </template>
            </el-table-column>
            <el-table-column label="设备编号" align="center" min-width="150">
              <template slot-scope="scope">
                {{ scope.row.equipmentNum || '-' }}
              </template>
            </el-table-column>
            <el-table-column label="设备名称" align="center" min-width="130">
              <template slot-scope="scope">
                {{ scope.row.equipmentName || '-' }}
              </template>
            </el-table-column>
            <el-table-column label="品牌" align="center" min-width="120">
              <template slot-scope="scope">
                {{ scope.row.brand || '-' }}
              </template>
            </el-table-column>
            <el-table-column label="规格型号" align="center" min-width="120">
              <template slot-scope="scope">
                {{ scope.row.model || '-' }}
              </template>
            </el-table-column>
            <el-table-column label="供应商" align="center" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.supplierName || '-' }}
              </template>
            </el-table-column>
            <el-table-column label="单位" align="center" min-width="120">
              <template slot-scope="scope">
                {{ scope.row.unitName || '-' }}
              </template>
            </el-table-column>
            <el-table-column label="备注" align="center" min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                {{ scope.row.remark || '-' }}
              </template>
            </el-table-column>
            <el-table-column label="状态" align="center" min-width="120" v-if="condition === '实际'">
              <dict-tag :options="statusInspection" :value="'2'" />
            </el-table-column>
          </el-table>
          <pagination v-if="item.total > 0" :total="item.total" :page.sync="item.pageNum" :limit.sync="item.pageSize"
            @pagination="condition === '计划' || condition === '实际' ? getListCondition(index) : getList(index)" />
        </div>
      </div>
      <div align="center" slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
        <el-button type="primary" @click="() => $parent.openSelect = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getSelectplanAreaList, getSelectPlanAreainspectionList } from '@/api/equipmentInspct/index.js'
export default {
  props: ['selection', 'condition'],
  data () {
    return {
      taskObj: {},
      tableData: [],
      loading: false,
      LoadingShow: false,
      activeName: undefined,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderByColumn: 'equipmentAccountId',
        isAsc: 'desc'//倒叙
      },
      timeOutLoading: null,
      total: 0
    }
  },
  computed: {
    filtersStatus () {
      return [
        { text: '未盘点', value: '0' },
        { text: '已盘点', value: '1' },
        { text: '盘亏', value: '2' },
        { text: '位置异常', value: '3' },
      ]
    }
  },
  created () {
    this.getbyDeptIds()
  },
  mounted () {

  },
  beforeUpdate () {
    // console.log('更新了beforeUpdate');
  },
  updated () {
    // console.log('更新了updated');

  },
  beforeDestroy () {
    clearTimeout(this.timeOutLoading)
  },
  watch: {
  },
  methods: {
    handleScroll (id) {
      var element = document.getElementById(id);
      element.scrollIntoView();
    },
    getbyDeptIds () {
      this.tableData = this.selection.selection.map((item) => {
        return {
          ...item,
          pageNum: 1,
          pageSize: 10,
          total: 0,
          loading: false,
          areaArrays: []
        }
      })
      console.log(this.condition === '计划');
      if (this.condition === '计划' || this.condition === '实际') {
        this.getListCondition()
      } else {
        this.getList()
      }
    },
    async getList (index) {
      if (!index) {
        for (let index = 0; index < this.tableData.length; index++) {
          const element = this.tableData[index];
          this.$set(this.tableData[index], 'loading', true)
          let params = {
            pageNum: element.pageNum || 1,
            pageSize: element.pageSize || 10,
            areaId: element.areaId
          }
          let data = await getSelectplanAreaList(params);
          this.$set(this.tableData[index], 'loading', false)
          this.$set(this.tableData[index], 'total', data && data.total)
          this.$set(this.tableData[index], 'areaArrays', data && data.data)
        }
      } else {
        // let LoadingInstance = Loading.service({ text: "加载中···", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
        const element = this.tableData[index];
        // this.LoadingShow = true
        this.$set(this.tableData[index], 'loading', true)
        let params = {
          pageNum: element.pageNum || 1,
          pageSize: element.pageSize || 10,
          areaId: element.areaId
        }
        let data = await getSelectplanAreaList(params);
        this.$set(this.tableData[index], 'loading', false)
        this.$set(this.tableData[index], 'total', data && data.total)
        this.$set(this.tableData[index], 'areaArrays', data && data.data)
        let id = `one${index}`
        this.timeOutLoading = setTimeout(() => {
          // this.LoadingShow = false
          var elementID = document.getElementById(id);
          elementID.scrollIntoView({
            behavior: "smooth",   //带滚动效果
            block: "start" //上边框与顶部空间对齐 默认值
          });

          // LoadingInstance.close();
        }, 800);

      }
      // for (let index = 0; index < this.tableData.length; index++) {

      // }

    },
    async getListCondition (index) {
      if (!index) {
        for (let index = 0; index < this.tableData.length; index++) {
          const element = this.tableData[index];
          this.$set(this.tableData[index], 'loading', true)
          let params = {
            pageNum: element.pageNum || 1,
            pageSize: element.pageSize || 10,
            areaId: element.areaId,
            id: this.selection.id
          }
          console.log(this.selection);
          let data = await getSelectPlanAreainspectionList(params);
          this.$set(this.tableData[index], 'loading', false)
          this.$set(this.tableData[index], 'total', data && data.total)
          this.$set(this.tableData[index], 'areaArrays', data && data.data)
        }
      } else {
        // let LoadingInstance = Loading.service({ text: "加载中···", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
        const element = this.tableData[index];
        // this.LoadingShow = true
        this.$set(this.tableData[index], 'loading', true)
        let params = {
          pageNum: element.pageNum || 1,
          pageSize: element.pageSize || 10,
          areaId: element.areaId,
          id: this.selection.id
        }
        let data = await getSelectPlanAreainspectionList(params);
        this.$set(this.tableData[index], 'loading', false)
        this.$set(this.tableData[index], 'total', data && data.total)
        this.$set(this.tableData[index], 'areaArrays', data && data.data)
        let id = `one${index}`
        this.timeOutLoading = setTimeout(() => {
          // this.LoadingShow = false
          var elementID = document.getElementById(id);
          elementID.scrollIntoView({
            behavior: "smooth",   //带滚动效果
            block: "start" //上边框与顶部空间对齐 默认值
          });

          // LoadingInstance.close();
        }, 800);

      }
      // for (let index = 0; index < this.tableData.length; index++) {

      // }

    },
    filterChange (filterCondition) {
      for (const key in filterCondition) {
        const element = filterCondition[key][0];
        this.activeName = element
        this.getList()
        return
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.center_dialog_children {
  // text-align: center;
  width: 95%;
  margin: 0px auto;
}
</style>